<template>
  <div class="info">
    <!-- 导航栏 -->
    <header class="header" @click="$router.back()" ref="top">
      <p v-if="num === 1" class="topleft" ref="topleft">
        <img
          ref="img"
          src="http://imooc.hybrid.lgdsunday.club/img/back-white.ee5cdaa6.svg"
        />
      </p>

      <img
        v-if="num === 2"
        src="http://imooc.hybrid.lgdsunday.club/img/back-white.ee5cdaa6.svg"
        style="width: 30px; position: absolute; left: 10px; bottom: 5px"
      />

      <span class="toptitle" ref="title">商品详情</span>
    </header>
    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :show-indicators="false"
      :autoplay="3000"
      indicator-color="white"
      @change="onChange"
    >
      <van-swipe-item
        class="infoe"
        v-for="item in info.swiperImgs"
        :key="item.id"
      >
        <img :src="item" alt="" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          <span> {{ current + 1 }} </span>/ {{ info.swiperImgs.length }}
        </div>
      </template>
    </van-swipe>
    <!-- 价格 -->
    <p class="price">￥{{ info.price }}</p>
    <!-- 商品名称 -->
    <p class="name">
      {{ info.name }}
    </p>
    <p style="height: 10px; background: #eeeeee; margin-top: 10px" />
    <!-- 商品详情 -->
    <p class="titke"><span class="tag">已选</span>{{ info.name }}</p>
    <van-divider style="margin-bottom: 0" />
    <!-- 服务 -->
    <p style="margin: 0 35px 5px 10px; text-align: left">
      <span class="ash"
        ><img
          src="http://imooc.hybrid.lgdsunday.club/img/support.4f37cf65.svg"
          class="imge"
        />
        可配送海外
      </span>
      <span class="ash"
        ><img
          src="http://imooc.hybrid.lgdsunday.club/img/support.4f37cf65.svg"
          class="imge"
        />
        京东发货&售后
      </span>
      <span class="ash"
        ><img
          src="http://imooc.hybrid.lgdsunday.club/img/support.4f37cf65.svg"
          class="imge"
        />
        京准达
      </span>
      <span class="ash"
        ><img
          src="http://imooc.hybrid.lgdsunday.club/img/support.4f37cf65.svg"
          class="imge"
        />
        211限时达
      </span>
      <span class="ash"
        ><img
          src="http://imooc.hybrid.lgdsunday.club/img/support.4f37cf65.svg"
          class="imge"
        />
        可自提
      </span>
      <span class="ash"
        ><img
          src="http://imooc.hybrid.lgdsunday.club/img/support.4f37cf65.svg"
          class="imge"
        />
        不可使用优惠券
      </span>
    </p>
    <!-- 详情照片 -->
    <img
      style="width: 100%"
      class="bottomimg"
      :src="item"
      v-for="item in info.detailImgs"
      :key="item.id"
      alt=""
    />
    <p style="height: 51px" />
    <!-- tabbar -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <!-- 添加至购物车 -->
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="handelPush(info)"
      />
      <!-- 直接购买 -->
      <van-goods-action-button
        type="danger"
        text="立即购买"
        @click="$router.push({ name: 'buy', params: info })"
      />
    </van-goods-action>
  </div>
</template>

<script>
export default {
  name: 'InfoView',
  data() {
    return {
      num: 1,
      info: {},
      current: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handelScroll)
  },
  methods: {
    // 添加到购物车
    handelPush(item) {
      // if (!item.isHave) {
      //   this.$toast('商品缺货')
      //   return
      // }
      this.$toast.success('添加成功')

      const right = this.$store.state.car.optionList.some(
        (obj) => obj.id === item.id
      )
      console.log(right)
      if (right) {
        this.$store.commit('car/resetShop', { id: item.id, count: 1 })
      } else {
        item.count = 1
        item.isChecked = false
        this.$store.commit('car/addShop', item)
      }
      this.$router.push('/shopping')
    },
    // 获取页面滚动
    handelScroll() {
      // console.log(this.$refs.top)
      try {
        const scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop
        // console.log(scrollTop, '滚动距离')
        if (scrollTop >= 166) {
          this.$refs.title.style.color = '#fff'
          this.$refs.top.style.background = '#d81e06'
          this.num = 2
          this.$refs.top.style.transition = 'opcity 2s'
        } else {
          this.$refs.top.style.background = '#d81e06'
          this.$refs.title.style.color = 'transparent'
          this.$refs.top.style.background = 'transparent'
          this.num = 1
        }
      } catch (error) {
        // console.log(error)
      }
    },
    onChange(index) {
      this.current = index
    }
  },
  created() {
    this.info = this.$route.params
    // console.log(this.$route.params)
  },
  activated() {
    this.info = this.$route.params
  }
}
</script>

<style lang="less" scoped>
.header {
  background-color: transparent;
  position: absolute;
  top: 20;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 10px;
  height: 50px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100%;
  .toptitle {
    color: transparent;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 32px;
    text-align: center;
  }
  .topleft {
    position: absolute;
    left: 30px;
    text-align: left;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #2c2c2c;
    img {
      position: absolute;
      width: 45px !important;
      left: 2px;
      bottom: 50%;
      transform: translateY(50%);
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  margin: 0;
  padding: 0;
  height: 750px;
  //   font-size: 20px;
  //   line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.bottomimg {
  display: block;
  margin: 0;
  padding: 0;
}
.ash {
  color: #999999;
  font-size: 25px;
  margin-right: 5px;
  line-height: 32px;
}
.imge {
  width: 25px;
}
.titke {
  margin: 40px 25px 30px 10px;
  font-weight: 600;
  font-size: 32px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.tag {
  color: #999999;
  font-size: 28px;
  margin-right: 20px;
}
.name {
  padding-left: 25px;
  font-size: 35px;
  text-align: left;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  //   -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.price {
  text-align: left;
  color: #d81e06;
  margin-left: 20px;
}
.custom-indicator {
  position: absolute;
  color: #fff;
  right: 0;
  bottom: 105px;
  padding: 15px 45px;
  font-size: 32px;
  background: rgba(0, 0, 0, 0.333);
  border-radius: 25px 0 0 25px;
  span {
    font-size: 36px;
    font-weight: 600;
  }
}
.infoe {
  width: 100%;
  img {
    width: 100%;
  }
}
</style>
